<script>
import axios from "axios";

export default {
  name: "type",
  data() {
    return {
      state: {
        types: [],
        page: 1,
        size: 5,
        books: [],
        total: 0,
        dialogFormVisible: false,
        dialogAddFormVisible: false,
        form: {},
        addFrom: {},
        formLabelWidth: '120px',
      },
      rules: {
        name: [
          {required: true, message: '请输入期刊类型', trigger: 'blur'},
          {max: 30, message: '最多 30 个字符', trigger: 'blur'}
        ],
      }
    }
  },
  methods: {
    getTypes() {
      //获取图书类型
      this.$api.bookType.getBookTypes(
          this.state.page,
          this.state.size
      ).then((res) => {
        var data = res.data;
        if (data.success) {
          this.state.types = data.content;
          this.state.total = parseInt(data.total)
          //console.log(res.data.content);
        } else {
          this.$message.error('服务器返回失败');
        }
      }).catch((resp) => {
        this.$message.error('服务器访问失败' + resp);
      })
    },
    handleEdit(index, row) {
      this.state.form = JSON.parse(JSON.stringify(row))
      this.state.dialogFormVisible = true
    },
    handleDelete(index, row) {
      this.$api.bookType.deleteBookType(row.id).then((res) => {
        var data = res.data;
        if (data.success) {
          this.$message.success('删除成功');
          this.getTypes()
        } else {
          this.$message.error('服务器返回失败');
        }
      }).catch((resp) => {
        this.$message.error('服务器访问失败' + resp);
      });
    },
    handleCurrentChange(val) {
      this.getTypes();
    },
    align() {
      return "text-align:center"
    },
    //新增
    submitAddBook(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$api.bookType.addBookType(this.state.addFrom).then((res) => {
            var data = res.data;
            if (data.success) {
              this.$message.success('新增成功');
              this.state.dialogAddFormVisible = false
              this.getTypes()
            } else {
              this.$message.error(res.data.message);
            }
          }).catch((resp) => {
            this.$message.error('服务器访问失败' + resp);
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //修改
    submitEditBook(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$api.bookType.updateBookType(this.state.form).then((res) => {
            var data = res.data;
            if (data.success) {
              this.$message.success('修改成功');
              this.state.dialogFormVisible = false
              this.getTypes()
            } else {
              this.$message.error(res.data.message);
            }
          }).catch((resp) => {
            this.$message.error('服务器访问失败' + resp);
          });

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //取消
    cancelEdit(formName) {
      this.state.dialogFormVisible = false
      this.state.dialogAddFormVisible = false
      console.log(this.state.addFrom)
      this.$refs[formName].resetFields();
    }
  },
  mounted() {
    this.getTypes()
  }
}
</script>

<template>
  <div>
    <el-button type="primary" size="small" @click="state.dialogAddFormVisible=true">新增
    </el-button>
    <el-table
        :data="state.types"
        border
        :cell-style="align"
        style="width: 100%">
      <el-table-column
          prop="id"
          align="center"
          label="编号">
      </el-table-column>
      <el-table-column
          prop="name"
          align="center"
          label="类型名称">
      </el-table-column>
      <el-table-column
          fixed="right"
          align="center"
          label="操作"
          width="150">
        <template slot-scope="scope">
          <el-button link type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          &nbsp
          <el-popconfirm title="确定删除这条数据吗？"
                         confirm-button-text="确定"
                         cancel-button-text="取消"
                         @confirm="handleDelete(scope.$index,scope.row)">
            <template #reference>
              <el-button size="small"
                         type="danger">删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 99%;display: flex">
      <div style="margin: 10px auto;">
        <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="state.page"
            :page-size="state.size"
            layout="total, prev, pager, next"
            :total="state.total">
        </el-pagination>
      </div>
    </div>

    <!-- 新增qk -->
    <el-dialog title="新增期刊" width="500px" :visible.sync="state.dialogAddFormVisible">
      <el-form :model="state.addFrom" :rules="rules" ref="addForm" :label-width="state.formLabelWidth">
        <el-form-item label="期刊类型名称" prop="name">
          <el-input style="width: 218px;" v-model="state.addFrom.name" autocomplete="off" placeholder="请输入期刊名称"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelEdit('addForm')">取 消</el-button>
        <el-button type="primary" @click="submitAddBook('addForm')">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑qk -->
    <el-dialog title="编辑期刊" width="500px" :visible.sync="state.dialogFormVisible">
      <el-form :model="state.form" :rules="rules" ref="editForm" :label-width="state.formLabelWidth">
        <el-form-item label="期刊编号">
          <el-input readonly style="width: 218px;" v-model="state.form.id" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="期刊名称" prop="name">
          <el-input style="width: 218px;" v-model="state.form.name" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelEdit('editForm')">取 消</el-button>
        <el-button type="primary" @click="submitEditBook('editForm')">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<style scoped>

</style>